function calcHeaderPosition() {
    banner = $('div.banner');
    banner.css({
        'zIndex': 9,
        'left': $('div#left').position().left,
        'top': 10
    });    
}

function initClouds() {
    
    // Initialisierung    
    header = $('div#header'); 
    
    // Anzahl der Wolken
    cloud_count = 30;
    
    // Weite
    depth = 10;
    
    // Abstand zwischen den Wolken
    distance = 50;
    // Geschwindigkeit
    speed = 1; 
    
    // Abstand zum oberen Rand
    y_pos = 60;
    
    // Zufallsfaktor    
    randomness = 3.2;
    
    // Wolkenbilder
    cloud_images = 5;
    
    
    // Banner ausrichten
    header.append('<a href="http://my-reality.de"><div class="banner"></div></a>');
    calcHeaderPosition();
    
    $(window).resize(function() {
        calcHeaderPosition();
    });
   
    // Wolken erschaffen
    for (i = 0; i != cloud_count; ++i) {
        // Zufallswolke erstellen
        type = Math.floor(Math.random() * cloud_images) + 1;
        header.append('<div class="cloud cloud-' + type + '"></div>');
    }
    
    cloud = $('div.cloud');
    x_pos = 0;
    layer = 1;    
    y_offset = 30;
    start_y = y_pos;
    
    cloud.each(function() {
       
        x_pos += $(this).width() + distance + Math.floor(Math.random() * (randomness * 100));
        
        // Durch die Ebenen iterieren
        if (x_pos - $(this).width() > $(window).width()) {
            x_pos = Math.floor(Math.random() * randomness);
            start_y -= y_offset;
            layer++;
            y_offset = y_offset / depth;
        }
        
        cloud_size = 100 - Math.floor(Math.random() * (randomness * 10)) + '%';
        $(this).append('<span class="layer">' + layer + '</span>');
        
        $(this).css({
            'left': x_pos, // Positionierung (Absolut)
            'top': start_y + Math.floor(Math.random() * randomness * 10),
            'opacity': (5 / layer), // Sichtbarkeit
            'zIndex': 10 - layer, 
            'width': $(this).width() / layer, // Groesse je nach Ebene anpassen
            'height': $(this).height() / layer,
            'backgroundSize': cloud_size // Hintergrund-Groesse an Div anpassen
        });
    });
    
    // Timer-Funktion
    timer = $.timer(function() {
            cloud.each(function() {
                  cloud_layer = parseInt($(this).children('span').html());
                  $(this).css('left', $(this).position().left + speed * (1 / cloud_layer));
                  
                  if ($(this).position().left + $(this).width() > $(window).width() - 60) {
                      $(this).css('opacity', $(this).css('opacity') / 1.1);
                  }
                  
                  if ($(this).position().left + $(this).width() > $(window).width()) {
                      $(this).css({
                          'left': $(this).width() * -1,
                          'opacity': (10 / cloud_layer)
                      });
                  }
            });    
        });
        
    timer.set({time : 1, autostart : true});
}


function initAnimations()
{
    // Menü animieren
    element = $('#menu a').not('#menu a.selected');    
    element.css({
        'opacity': 0.7
    });    
    
    element.hover(function() {              
        $(this).stop(true, true).animate({
                opacity:'+=' + 1.0
            }, 700);
        }, function() {
            $(this).stop(true, true).animate({
                opacity:'-=' + 0.3
            }, 700);
    });
    
    // Bar animieren // DON'T WORK IN IE9!
//    item = $('.block').children('li');
//    item.css({
//        'opacity': 0.7
//    });
//    
//    
//    item.hover(function() {
//        
//        $(this).stop(true, true).animate({
//            opacity:'+=' + 1.0,
//            paddingLeft:'+=' + 3
//        }, 300);
//    }, function() {
//        $(this).stop(true, true).animate({
//            opacity:'-=' + 0.3,
//            paddingLeft:'-=' + 3
//        }, 300);
//    });
    
    // Bookmarks
    padding = 5;
    bookmark = $('div#bookmarks div.block a');    
    $('div#bookmarks .block').css({
        'paddingTop': 3}
    );    
    
    $('div#bookmarks .block-body').css({
        'paddingBottom': 25,
        'paddingTop': 14
    }); 

    bookmark.hover(function() {
        
        $(this).parent('.block-body').stop(true, true).animate({
        paddingBottom:"-=" + padding * 2
        }, 150);
        
        $(this).parent('.block-body').parent('.block').stop(true, true).animate({
            paddingBottom:'+=' + padding
        }, 150);
        
    }, function() {
        $(this).parent('.block-body').stop(true, true).animate({
        paddingBottom:"+=" + padding * 2
        }, 250);
        
        $(this).parent('.block-body').parent('.block').stop(true, true).animate({
            paddingBottom:'-=' + padding
        }, 250);
    });
    
    // Tags stylen
    tag = $('.vocabulary ul li a');
    
    //tag.css('fontSize', tag.text().length);
    initClouds();
}
